<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>api天气预报</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <input type="text" id="ipt" placeholder="请输入要查询的城市天气">
    <div>城市：<span id="city"></span></div>
    <div>天气：<span id="now"></span></div>
    <div>风向：<span id="wind"></span></div>
    <div>穿衣指数：<span id="drsg"></span></div>

    <div id="day">
        <ul class="clearfix" id="list"></ul>
        <ul class="clearfix" id="list1"></ul>
    </div>
</div>

<script>
    var city = '泊头';
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json = xmlhttp.responseText;
                //把返回的数据，转化成数组对象格式
                json = JSON.parse(json);
                console.log(json);
                //城市
                document.querySelector("#city").innerHTML = json.basic.city;
                //天气
                document.querySelector("#now").innerHTML = json.now.cond.txt;
                //风向
                document.querySelector("#wind").innerHTML = json.now.wind.dir;
                //穿衣指数
                document.querySelector("#drsg").innerHTML = json.suggestion.drsg.txt;


                for (var i = 0;i<json.daily_forecast.length;i++){
                    var date = document.createElement('span');
                    date.innerHTML=json.daily_forecast[i].date;
                    var cond = document.createElement('span');
                    cond.innerHTML=json.daily_forecast[i].cond.txt_n;
                    var tmp = document.createElement('span');
                    tmp.innerHTML=json.daily_forecast[i].tmp.min+"℃ -"+ json.daily_forecast[i].tmp.max+"℃";
                    var wind = document.createElement('span');
                    wind.innerHTML=json.daily_forecast[i].wind.dir+json.daily_forecast[i].wind.sc+"级";
                    date.classList.add('span1');
                    cond.classList.add('span2');
                    tmp.classList.add('span3');
                    wind.classList.add('span4');


                    var you = document.createElement('li');

                    document.querySelector("#list").appendChild(you);
                    you.appendChild(date);
                    you.appendChild(cond);
                    you.appendChild(tmp);
                    you.appendChild(wind);




                }
                for (var j = 0; j<json.hourly_forecast.length; j++){
                    var sj = document.createElement('li');

                    var a = document.createElement('p');
                    a.innerHTML=json.hourly_forecast[j].date.substring(11.13);
                    var b = document.createElement('p');
                    b.innerHTML=json.hourly_forecast[j].cond.txt;
                    var c = document.createElement('p');
                    c.innerHTML=json.hourly_forecast[j].tmp+"℃";
                    var d = document.createElement('p');
                    d.innerHTML=json.hourly_forecast[j].wind.dir;
                    var e = document.createElement('p');
                    e.innerHTML=json.hourly_forecast[j].wind.sc+"级";

                    d.classList.add('xia')

                    document.querySelector("#list1").appendChild(sj);
                    sj.appendChild(a);
                    sj.appendChild(b);
                    sj.appendChild(c);
                    sj.appendChild(d);
                    sj.appendChild(e);
                }

            }
        };
        xmlhttp.open("GET","http://bird.ioliu.cn/weather?city="+city,true);
        xmlhttp.send();
    }

    loadXMLDoc();

    document.querySelector("#ipt").addEventListener('change',function () {
        console.log(this.value);
        //赋值城市
        city = this.value;
        //执行查询天气的方法
        document.querySelector("#list").innerHTML="";
        loadXMLDoc();
    })
</script>
</body>
</html>
